<template>
  <div id="app">
    <div>
      <span>姓名:</span>
      <input type="text" v-model="name" />
    </div>
    <div>
      <span>年龄:</span>
      <input type="number" v-model="age" />
    </div>
    <div>
      <span>性别:</span>
      <select v-model="sex" >
        <option value="男" >男</option>
        <option value="女" >女</option>
      </select>
    </div>
    <div>
      <button @click="addData" >添加/修改</button>
    </div>
    <div>
      <table
        border="1"
        cellpadding="10"
        cellspacing="0"
      >
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>操作</th>
        </tr>
        <tr v-for="(item,index) in arr" :key="index" v-show="arr.length !==0">
          <td>{{index + 1}}</td>
          <td>{{item.name}}</td>
          <td>{{item.age}}</td>
          <td>{{item.sex}}</td>
          <td>
            <button @click="del(index)" >删除</button>
            <button @click="edit(index)">编辑</button>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      name: '',
      age: '',
      sex: '',
      arr: [],
      state: false,
      stateIndex: 0
    }
  },
  methods: {
    addData () {
      if (!this.state) {
        if (this.name.trim() && this.age.trim() && this.sex !== '') {
          this.arr.push({
            name: this.name,
            age: this.age,
            sex: this.sex
          })
          this.name = ''
          this.age = ''
          this.sex = ''
        } else {
          alert('请把数据填写完整')
        }
      } else {
        if (this.name.trim() && this.age.trim() && this.sex !== '') {
          this.arr.splice(this.stateIndex, 1, {
            name: this.name,
            age: this.age,
            sex: this.sex
          })
          this.name = ''
          this.age = ''
          this.sex = ''
          this.state = false
        } else {
          alert('请把数据填写完整')
        }
      }
    },
    del (index) {
      this.arr.splice(index, 1)
    },
    edit (index) {
      const a = this.arr.slice(index, index + 1)[0]
      this.name = a.name
      this.age = a.age
      this.sex = a.sex
      this.state = true
      this.stateIndex = index
    }
  }
}
</script>
